<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>KYE人脸部识别考勤系统</title>
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/face-api.min.js"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="icon" href="static/images/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon"/>
    <style>
        body {
            margin: 0;
            padding: 0;

        }

        video {
            /*clear: both;*/
            display: block;
            position: absolute;
            display: flex;
            margin-left: 30px;
            margin-top: 10px;
        }

        canvas {
            display: block;
            position: absolute;
            display: flex;

            margin-top: -10px;
            margin-left: 30px;
        }
    </style>
</head>

<body>
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">

            <img src="static/images/jitsilogo.png" style="margin-left: -580px; margin-top: 8px;">
            <a class="navbar-brand" href="/" rel="external nofollow" rel="external nofollow">收集人脸信息</a>
            <a class="navbar-brand" href="/kaoqin" rel="external nofollow" rel="external nofollow">开始考勤</a>
        </div>

    </div>

</div>

<div style="margin-left: 50px">
    <label class=".label-large">员工工号： </label> <input type="text" name="gh" id="gh" placeholder="请输入工号"
                                                      size="7">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <label class=".label-large">员工姓名： </label> <input type="text" id="name" name="name" size="9"
                                                      placeholder="请输入姓名">
    <button class="btn btn-success" onclick="takephotos()"><span class="glyphicon glyphicon-camera"></span> 采
        集
    </button>
</div>
<video id="v" src="" width="368px" height="277px" style="border: 1px solid pink;" autoplay muted></video>
<canvas id="canvas1" width="368" height="277"
        style="border: 1px solid pink; margin-left: 400px;margin-top:10px;"></canvas>
<br>


<script>
    let faceapiReady = false;
    var kq = false;
    let url = window.location.href;
    var canvas;
    var canvas1 = document.getElementById('canvas1');
    var video = document.getElementById('v');
    var displaySize = {width: video.width, height: video.height};
    let dir = 'https://static.insta360.com/face/model';
    var myid = document.getElementById('gh');
    var myname = document.getElementById('name');


    startVideo();


    function takephotos() {

        // 前端画布画图模式两种模式:  2d,3d
        ctx = canvas1.getContext("2d")
        ctx.drawImage(v, 0, 0, 368, 277)
        id = myid.value
        name = myname.value
        // 用jquery 的ajax技术实现前端和后端的通信
        face_data = canvas1.toDataURL("image/jpg", 0.5)   //把图像转为数据
        //   console.log(face_data)  //data:image/png;base64,
        //去掉前面不需要的字符22个,要以后的
        face_data = face_data.substring(22)
        $.post("/", {"myimg": face_data, "id": id, "name": name}, function (res) {
            console.log(res)
        })
    }


    async function startVideo() {
        console.log("start video");
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先，如果有getUserMedia的话，就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }

                // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        const constraints = {
            video: true,
            audio: false
        };
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(stream => {
            let v = document.getElementById('v');
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in v) {
                v.srcObject = stream;
            } else {
                // 防止再新的浏览器里使用它，应为它已经不再支持了
                v.src = window.URL.createObjectURL(stream);
            }
            v.onloadedmetadata = function (e) {
                v.play();
            };
        }).catch(err => {
            console.error(err.name + ": " + err.message);
        })
    }


</script>

</body>

</html>